<!-- created:2021/12/24 16:23 By AdinZ -->
<template>
  <div class="notify">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload" addbtn
               @on-add="()=>{edit.modify=true,edit.show=true}"/>
    <el-drawer v-model="edit.show" direction="ltr" @close="edit.data={}" :with-header="false" :size="drawerSize">
      <notify-edit v-if="edit.show" v-model:data="edit.data" v-model:modify="edit.modify" @close="edit.show=false" @success="()=>{onload(data),edit.show=false}"/>
    </el-drawer>

  </div>
</template>

<script>

import TablePage from "@/components/TablePage/index.vue";
import NotifyEdit from "@/views/user/notify/notify_edit.vue";

export default {
  name: "notify",
  components: {NotifyEdit, TablePage},
  data() {
    return {
      query: [
        {
          type: 'date-picker',
          label: '发送时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          type: 'index',
          width: '80px'
        },
        {
          label: '消息类型',
          prop: 'type',
          width: '110px',
          type: 'render',
          render: (data) => {
            if (data.type == 'NOTIFY') {
              return `<span class="el-tag el-tag--mini el-tag--light">通知消息</span>`
            } else if (data.type == 'WARN') {
              return `<span class="el-tag el-tag--mini el-tag--light">警告消息</span>`
            } else if (data.type == 'NEW_VERSION') {
              return `<span class="el-tag el-tag--mini el-tag--light">版本发布</span>`
            }
          }
        },
        {
          label: '消息标题',
          width: '200px',
          prop: 'title',
        },
        {
          label: '定向类型',
          width: '110px',
          prop: 'title',
          type: 'render',
          render: (data) => {
            if (data.byUser == 0) {
              return `<span class="el-tag el-tag--mini el-tag--light">全部会员</span>`
            } else {
              return `<span class="el-tag el-tag--mini el-tag--light">指定会员</span>`
            }
          }
        },
        {
          label: '发送时间',
          width: '170px',
          prop: 'created',
          type: 'date'
        },
        {
          label: '管理',
          width: '170px',
          type: 'buttons',
          buttons: [
            {
              label: '查看',
              type: 'primary',
              styles: {},
              icon: 'Search',
              callback: (data) => {
                this.edit.data = JSON.parse(JSON.stringify(data));
                this.edit.show = true;
                this.edit.modify = false
              }
            }, {
              label: '删除',
              type: 'danger',
              styles: {},
              icon: 'Delete',
              callback: (data) => {
                this.$api.confirm(`<p>确定要删除[${data.title}]吗?<br/></p>`).then(() => {
                  this.handlerDelete(data)
                })
              }
            },
          ]
        },
      ],
      data: {
        total: 1000,
        list: [],
        page: 1,
        size: 40
      },
      edit: {
        show: false,
        data: {},
        modify: false
      }
    }
  },
  computed: {
    drawerSize() {
      if (window.innerWidth < 1700) {
        return '100%'
      } else return '1700px'
    }
  },
  created() {
  },
  methods: {
    onload(data) {
      if (data && data.page)
        this.data.page = data.page;
      if (data && data.size)
        this.data.size = data.size;

      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manage/notify/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
    getList() {
      this.$api.post('/api/manage/notify/query', {}, this.query).then(res => {
        this.list = res.data;
        this.query.total = res.total
      })
    },

    handlerDelete(row) {
      this.$api.deletes('/api/manage/notify/delete', {id: row.id}).then(() => {
        this.onload(this.data)
      })
    },
    handlerEdit(id) {
      this.edit = {show: true, id: id}
    }

  }
}
</script>

<style scoped lang="scss">
.notify {

}
</style>
